<template>
  <div class="hello">
    <test/>
    <div>
      <input type="text" v-model="text">
    </div>
    <div :class="{red:red}">
      {{text}}
    </div>
    <div v-show="isShow">
      等于2就隐藏
    </div>
  </div>
</template>

<script>
  import Test from './Test'
export default {
  name: 'HelloWorld',
  components:{Test},
  props: {
    msg: String
  },
  data(){
    return {
      list:[],
      text:'',
      isShow:true,
      red:true
    }
  },
  mounted() {

  },
  watch:{
    text(n){
      if(n == 2){
        this.isShow = false;
        this.red = false;
      }else{
        this.isShow = true;
        this.red = true;
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .red{
    color:red;
  }
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
